title: Automating my slider
body: <p>I have an image slider with an hover effect build into my Website. (click here for my code: <a href="http://jsfiddle.net/Nctfa/" rel="nofollow">http://jsfiddle.net/Nctfa/</a>).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="accordian"&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;div class="image_title"&gt;   &lt;a href="#"&gt;TERA Online&lt;/a&gt;
  
          &lt;/div&gt;  &lt;a href="#"&gt;
              &lt;img src="http://spieletrend.com/screenshots/tera-release-termin.jpg"/&gt;
          &lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="image_title"&gt;   &lt;a href="#"&gt;Diablo 3&lt;/a&gt;
  
          &lt;/div&gt;  &lt;a href="#"&gt;
              &lt;img src="http://www.airbornegamer.com/wp-content/uploads/2013/08/diablo-3-HD-wallpaper-640x320.jpg"/&gt;
          &lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="image_title"&gt;   &lt;a href="#"&gt;Assassin's Creed&lt;/a&gt;
  
          &lt;/div&gt;  &lt;a href="#"&gt;
              &lt;img src="http://totalgame.es/wp-content/uploads/2013/09/Assassins-Creed-4-Black-Flag.jpg"/&gt;
          &lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="image_title"&gt;   &lt;a href="#"&gt;Grand Theft Auto V&lt;/a&gt;
  
          &lt;/div&gt;  &lt;a href="#"&gt;
              &lt;img src="http://b.vimeocdn.com/ts/448/977/448977532_640.jpg"/&gt;
          &lt;/a&gt;
  
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="image_title"&gt;   &lt;a href="#"&gt;Battlefield 4&lt;/a&gt;
  
          &lt;/div&gt;  &lt;a href="#"&gt;
              &lt;img src="http://stickskills.com/omega/wp-content/uploads/2013/04/Battlefield4-e1366202710731.jpg"/&gt;
          &lt;/a&gt;
  
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>    </p>
  
  <p>CSS:</p>
  
  <pre><code>* {
  margin:0px;
  padding:0px;
  color:#fff;
  }
  .accordian {
      width: 805px;
      height: 320px;
      overflow: hidden;
      margin: 100px auto;
      box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
      -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
      -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
  }
  .accordian ul {
      width: 2000px;
  }
  .accordian li {
      position: relative;
      display: block;
      width: 160px;
      float: left;
      border-left: 1px solid #888;
      box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
  }
  .accordian ul:hover li {
      width: 40px;
  }
  .accordian ul li:hover {
      width: 640px;
  }
  .accordian li img {
      display: block;
  }
  .image_title {
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 0;
      bottom: 0;
      width: 640px;
  }
  .image_title a {
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 20px;
      font-size: 16px;
  }
  </code></pre>
  
  <p>I want to automatically change the highlighted picture while i am not hovering it (like this: <a href="http://www.pixedelic.com/plugins/diapo/" rel="nofollow">http://www.pixedelic.com/plugins/diapo/</a>).</p>
  
  <p>Is it possible, to do that without affecting the img tags at all?</p>
  
  <p>Thanks,
  Thorkel</p>